<template>
  <div class="children">
    <el-divider>基本信息</el-divider>
    <div class="dialog_left">
      <div v-if="form.image">
        <ImagePreview :src="form.image" :width="`100%`" :height="337"></ImagePreview>
        <!-- <el-image :src="form.image" style="width:100%;height: 100%;">
            </el-image> -->
      </div>
      <div>
        <el-descriptions direction="vertical" :column="5" border>
          <el-descriptions-item label="计划编号">{{ form.inspectionPlanNum || '-' }}</el-descriptions-item>
          <el-descriptions-item label="标题">{{ form.title || '-' }}</el-descriptions-item>
          <el-descriptions-item label="循环类型">{{ ['循环巡检', '指定日期'][form.cycleType] || '-' }}</el-descriptions-item>
          <el-descriptions-item label="生成任务">
            {{ ['提前一日', '提前二日', '提前三日', '提前四日', '提前五日'][form.generateTaskType] || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="备注">{{ form.remark || '-' }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <el-divider>巡检信息</el-divider>
    <el-table v-loading="loading" :data="form.inspectionPlanDetailVos">
      <el-table-column label="序号" align="center" prop="order" width="50" />
      <el-table-column label="巡检员" align="center" min-width="150">
        <template slot-scope="scope">
          <label v-for="(v, i) in scope.row.inspectionInspectors" :key="i">
            {{ v.inspectorName }}
            <span v-if="i !== scope.row.inspectionInspectors.length - 1">,</span>
          </label>

        </template>
      </el-table-column>
      <el-table-column label="所属部门" align="center" min-width="150">
        <template slot-scope="scope">
          <label v-for="(v, i) in scope.row.inspectionInspectors" :key="i">
            {{ v.deptName }}
            <span v-if="i !== scope.row.inspectionInspectors.length - 1">,</span>
          </label>
        </template>
      </el-table-column>
      <el-table-column label="巡检设备数" align="center" min-width="120">
        <template slot-scope="scope">
          <el-link @click="handledetailed(scope.row.inspectionAreas)" type="primary">{{ scope.row.equipmentCount || '-'
          }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="巡检时间" align="center" min-width="160">
        <template slot-scope="scope">
          {{ scope.row.inspectionTime || '-' }}
        </template>
      </el-table-column>
    </el-table>
    <el-divider>设置条件</el-divider>
    <label style="margin-right:20px;font-size: 14px;">执行日期:</label>
    <el-radio-group v-model="form.cycleCondition">
      <el-radio :label="'0'" disabled>忽略周末和假期</el-radio>
      <el-radio :label="'1'" disabled>遇周末和假期延后执行</el-radio>
      <el-radio :label="'2'" disabled>遇周末延后执行</el-radio>
      <el-radio :label="'3'" disabled>遇假期延后执行</el-radio>
      <el-radio :label="'4'" disabled>遇周末和假期提前执行</el-radio>
      <el-radio :label="'5'" disabled>遇周末提前执行</el-radio>
      <el-radio :label="'6'" disabled>遇假期提前执行</el-radio>
    </el-radio-group>
    <template v-if="openSelect">
      <Select :selection="selection"></Select>
    </template>
  </div>
</template>

<script>
import { getSelectplanAreaChildren } from '@/api/equipmentInspct/index.js'
// import Upload from '@/components/upload/index.vue'
export default {
  name: 'detailed',
  props: ['rowObj'],
  components: {
    Select: () => import('./ChildrenValue/Select.vue')
    // Upload
  },
  data () {
    return {
      form: {
      },
      loading: false,
      openSelect: false,
      selection: {}
    }
  },
  created () {
    this.getlist()
  },
  methods: {
    handledetailed (row) {
      this.selection = {
        selection: row
      }
      this.openSelect = true
    },
    async getlist () {
      this.loading = true
      let res = await getSelectplanAreaChildren(this.rowObj.inspectorPlanId);
      // let data = await getdatalist({ dictType: 'base_unit' })//单位词典
      //  this.dictdatalist=data.data
      this.loading = false
      this.form = res.data
      this.form.inspectionPlanDetailVos = res.data.inspectionPlanDetailVos.map((item, index) => {
        return {
          ...item,
          order: index + 1
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.center_dialog {
  // text-align: center;
  width: 90%;
  margin: 0px auto;
}

.dialog_left {
  width: 100%;
  display: flex;
}

.dialog_left>div:nth-child(1) {
  flex: 1
}

.dialog_left>div:nth-child(2) {
  flex: 2;
  margin-left: 10px
}
</style>